<template>
    <div class="register-page">
        <div class="top-seach">注册
            <span class="left" @click="back"></span>
        </div>
        <div class="input-box">
            <span>手机号</span><input type="text" placeholder="请输入手机号" autocomplete="off" />
        </div>
        <div class="input-box">
            <span>验证码</span><input type="text" placeholder="请输入验证码" autocomplete="off" />
            <div class="yanzheng">获取验证码</div>
        </div>
        <div class="fuwutiankuan">
            <span :class="{'active': tongyi}" @click="toggleTongyi"></span>我已阅读并同意xxxx的 <router-link to="/fuwutiaokuan">服务条款</router-link>
        </div>
        <div class="btn">注册</div>
    </div>
</template>



<script>

export default {
    data() {
        return {
            tongyi:false
        }
    },
    methods:{
        back:function(){
            window.history.back(-1);    
        },
        toggleTongyi:function(){
            this.tongyi = !this.tongyi;
        }
    },
    components:{  
        
    }  
}
</script>

<style lang="less" rel="stylesheet/less">
.register-page{
    padding-top:0.88rem;
    padding-bottom:1.88rem;
   .top-seach{
        width:100%;
        height:0.88rem;
        position:fixed;
        top:0;
        left:0;
        z-index:11;
        background:#00D397;
        line-height:0.88rem;
        text-align:center;
        font-size: 0.34rem;
        color: #FFFFFF;
        .left{
            width:0.2rem;
            height:0.37rem;
            display:inline-block;
            position:absolute;
            left:0.22rem;
            top:0.28rem;
            background:url('left.png') no-repeat;
            background-size:100% 100%;
        }
   } 
   .input-box{
       width:7.1rem;
       height:1rem;
       margin:0 auto;
       border-bottom:1px solid #E7E7E7;
       display:flex;
       position:relative;
       span{
            width:1.72rem;
            height:1rem;
            display:inline-block;
            line-height:1rem;
            padding-left:0.4rem;
            font-size: 0.28rem;
            color: #666666;
       }
       input{
           height:1rem;
           width:5.38rem;
            font-size: 0.28rem;
            color: #CCCCCC;
       }
       .yanzheng{
           width:2.02rem;
           height:0.78rem;
           text-align:center;
           line-height:0.78rem;
            font-size:0.28rem;
            color: #00D397;
            border-left:1px solid #CCCCCC;
            position:absolute;
            right:0;
            top:0.11rem;
       }
   }
   .fuwutiankuan{
        font-size: 0.24rem;
        color: #999999;
        letter-spacing: 0px;
        width:7.1rem;
        margin:0.4rem auto 0;
        span{
            display:inline-block;
            width:0.34rem;
            height:0.34rem;
            background:url('gou.png') no-repeat;
            background-size:100% 100%;
            vertical-align: sub;
            margin-right:0.14rem;
            &.active{
                background:url('gou-active.png') no-repeat;
                background-size:100% 100%;
            }
        }
        a{
            font-size: 0.24rem;
            color: #fe6767;
            letter-spacing: 0px;
            text-decoration: underline;
        }
   }
   .btn{
        width:6rem;
        height:1rem;
        margin:7.3rem auto 0;
        text-align:center;
        line-height:1rem;
        background: #00D397;
        box-shadow: 0px 2px 10px 0px rgba(255,255,255,0.63), 0px 9px 20px 0px rgba(0,211,151,0.49);
        font-size: 0.34rem;
        color: #FFFFFF;
        letter-spacing: 0px;
   }
}
</style>

